<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios 发送AJAX</title>
    <script
      crossorigin="anonymous"
      src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"
    ></script>
  </head>
  <body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
      const btns = document.querySelectorAll("button");

      // 配置baseurl
      axios.defaults.baseURL = "http://www.xin.com:8000";

      // 发送GET请求
      btns[0].onclick = function () {
        axios
          .get("/axios", {
            // url 参数
            params: { id: 100, vip: 200 },
            // 请求头信息
            headers: {
              name: "yibuxiaoxin",
              age: 20,
            },
            // 设置超时
            timeout: 2000,
          })
          .then((res) => {
            // 成功处理
            console.log(res);
          })
          .catch((err) => {
            // 失败处理
            console.log(err);
          });
      };

      // 发送POST请求
      btns[1].onclick = function () {
        axios
          .post(
            "/axios",
            {
              username: "admin",
              password: "admin",
            },
            {
              // url 参数
              params: {
                id: 200,
                vip: 3,
              },
              // 请求头参数
              headers: {
                name: "yibuxiaoxin",
                age: 20,
              },
              // 设置超时
              timeout: 2000,
            }
          )
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.error(err);
          });
      };

      // 通用ajax
      btns[2].onclick = function () {
        axios({
          // 请求方法
          method: "POST",
          // url
          url: "/axios",
          // url参数
          params: {
            vip: 10,
            level: 30,
          },
          // 头信息参数
          headers: {
            a: 100,
            b: 200,
          },
          // 请求体参数
          data: {
            id: 123,
            username: "admin",
          },
          // 设置超时
          timeout: 2000,
        })
          .then((res) => {
            console.log(res);
            // 响应状态码
            console.log(res.status);
            // 响应状态字
            console.log(res.statusText);
            // 响应头信息
            console.log(res.headers);
            // 响应数据
            console.log(res.data);
          })
          .catch((err) => {
            console.log(err);
          });
      };
    </script>
  </body>
</html>
